<script setup lang="ts">
import {reactive, inject, provide, watch, ref, onMounted, computed} from 'vue'
import PositionType from '../../../task/components/PositionType.vue'
import {Toast} from 'vant'
import {updateWorkEx} from "@/api/Resume";

const {closeChange} = inject('popup') as any
const state: any = reactive({
  minDate: new Date(1980, 1, 1),
  maxDate: new Date()
})
const workExs = ref<any>({
  companyName: '',
})
const props = defineProps({
  workEx: {
    type: Object as any
  }
})

const setInfo = () => {
  if (props.workEx) {
    workExs.value = props.workEx
  }
}
// watch(() => props.item, (newValue, oldValue) => {
//   setInfo()
// })
const priceSelect = (value: any) => {
  state.priceValue = value.name
}
const closePositionType = (item: any) => {
  workExs.value.jobType = item.id
  workExs.value.jobValue = item.value
  state.showPositionType = false
}
const closeServiceType = (name: any) => {
  if (name) state.serviceValue = name
  state.showServiceType = false
}
const startTimeConfirm = (value: any) => {
  workExs.value.startTime = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()
  state.showStartTime = false
}
const endTimeConfirm = (value: any) => {
  workExs.value.endTime = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()
  state.showEndTime = false
}
const submit = async () => {
  updateWorkEx(workExs.value).then(res => {
    Toast(res.msg);
  })
}
provide('popup', {
  closePositionType,
  closeServiceType
})
onMounted(() => {
  setInfo()
})
</script>
<template>
  <van-nav-bar title="工作经历" left-arrow @click-left="closeChange"/>
  <div class="position-list">
    <div class="user-item">
      <h5>公司名称</h5>
      <van-field v-model="workExs.companyName" label="" placeholder="请填写您的公司名称"/>
    </div>
    <div class="user-item">
      <h5>职位类型</h5>
      <van-field v-model="workExs.jobValue" label="" placeholder="请选择您的职位类型"
                 readonly
                 is-link
                 @click="state.showPositionType = true"/>
    </div>
    <div class="user-item">
      <h5>工作时间</h5>
      <div class="work-time-list">
        <van-field v-model="workExs.startTime" readonly label="" placeholder="请选择"
                   @click="state.showStartTime=true"/>
        <span></span>
        <van-field v-model="workExs.endTime" readonly label="" placeholder="请选择" @click="state.showEndTime=true"/>
      </div>
      <van-action-sheet v-model:show="state.showStartTime">
        <van-datetime-picker
            type="date"
            title="选择年月"
            :min-date="state.minDate"
            :max-date="state.maxDate"
            @confirm="startTimeConfirm"
            @cancel="state.showStartTime=false"
        />
      </van-action-sheet>
      <van-action-sheet v-model:show="state.showEndTime">
        <van-datetime-picker
            type="date"
            title="选择年月"
            :min-date="state.minDate"
            :max-date="state.maxDate"
            @confirm="endTimeConfirm"
            @cancel="state.showEndTime=false"
        />
      </van-action-sheet>
    </div>
    <div class="user-item">
      <h5>工作描述</h5>
      <van-field v-model="workExs.workDesc" label="" placeholder="请填写您的工作描述"
                 type="textarea"
                 rows="10"
                 autosize/>
    </div>
    <button class="wy-submit" @click="submit">完成</button>
    <!--职位类型弹窗-->
    <van-popup v-model:show="state.showPositionType" position="top" duration="0"
               :style="{ width: '100%',height: '100%' }">
      <PositionType></PositionType>
    </van-popup>
  </div>
</template>
<style scoped>
.position-list {
  margin: 1.52rem 0.67rem 0;
}

.work-time-list {
  display: flex;
  align-items: center
}

.work-time-list span {
  width: 0.83rem;
  height: 0.05rem;
  margin-right: 2.4rem;
  background: #333333;
}

.work-time-list .van-cell {
  width: 6rem;
}
</style>